<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="strlesheet" href="css/pagination.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/main.css">
    <style>
        .tree li {
            list-style-type: none;
            cursor:pointer;
        }
        table tbody tr:nth-child(odd){background:#F4F4F4;}
        table tbody td:nth-child(even){color:#C00;}
    </style>
    <title>众筹网</title>
</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <div><a class="navbar-brand" style="font-size:32px;" href="#">众筹平台 - 角色维护</a></div>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li style="padding-top:8px;">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default btn-success dropdown-toggle" data-toggle="dropdown">
                            <i class="glyphicon glyphicon-user"></i> [[${user.userName}]] <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#"><i class="glyphicon glyphicon-cog"></i> 个人设置</a></li>
                            <li><a href="#"><i class="glyphicon glyphicon-comment"></i> 消息</a></li>
                            <li class="divider"></li>
                            <li><a href="index"><i class="glyphicon glyphicon-off"></i> 退出系统</a></li>
                        </ul>
                    </div>
                </li>
                <li style="margin-left:10px;padding-top:8px;">
                    <button type="button" class="btn btn-default btn-danger">
                        <span class="glyphicon glyphicon-question-sign"></span> 帮助
                    </button>
                </li>
            </ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="Search...">
            </form>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <div class="tree">
                <ul style="padding-left:0px;" class="list-group">
                    <li class="list-group-item tree-closed" >
                        <a href="main"><i class="glyphicon glyphicon-dashboard"></i> 控制面板</a>
                    </li>
                    <li class="list-group-item">
                        <span><i class="glyphicon glyphicon glyphicon-tasks"></i> 权限管理 <span class="badge" style="float:right">3</span></span>
                        <ul style="margin-top:10px;">
                            <li style="height:30px;">
                                <a href="user"><i class="glyphicon glyphicon-user"></i> 用户维护</a>
                            </li>
                            <li style="height:30px;">
                                <a href="role" style="color:red;"><i class="glyphicon glyphicon-king"></i> 角色维护</a>
                            </li>
                            <li style="height:30px;">
                                <a href="permission"><i class="glyphicon glyphicon-lock"></i> 菜单维护</a>
                            </li>
                        </ul>
                    </li>
                    <li class="list-group-item tree-closed">
                        <span><i class="glyphicon glyphicon-ok"></i> 业务审核 <span class="badge" style="float:right">3</span></span>
                        <ul style="margin-top:10px;display:none;">
                            <li style="height:30px;">
                                <a href="auth_cert"><i class="glyphicon glyphicon-check"></i> 实名认证审核</a>
                            </li>
                            <li style="height:30px;">
                                <a href="auth_adv"><i class="glyphicon glyphicon-check"></i> 广告审核</a>
                            </li>
                            <li style="height:30px;">
                                <a href="auth_project"><i class="glyphicon glyphicon-check"></i> 项目审核</a>
                            </li>
                        </ul>
                    </li>
                    <li class="list-group-item tree-closed">
                        <span><i class="glyphicon glyphicon-th-large"></i> 业务管理 <span class="badge" style="float:right">7</span></span>
                        <ul style="margin-top:10px;display:none;">
                            <li style="height:30px;">
                                <a href="cert"><i class="glyphicon glyphicon-picture"></i> 资质维护</a>
                            </li>
                            <li style="height:30px;">
                                <a href="type"><i class="glyphicon glyphicon-equalizer"></i> 分类管理</a>
                            </li>
                            <li style="height:30px;">
                                <a href="process"><i class="glyphicon glyphicon-random"></i> 流程管理</a>
                            </li>
                            <li style="height:30px;">
                                <a href="advertisement"><i class="glyphicon glyphicon-hdd"></i> 广告管理</a>
                            </li>
                            <li style="height:30px;">
                                <a href="message"><i class="glyphicon glyphicon-comment"></i> 消息模板</a>
                            </li>
                            <li style="height:30px;">
                                <a href="project_type"><i class="glyphicon glyphicon-list"></i> 项目分类</a>
                            </li>
                            <li style="height:30px;">
                                <a href="tag"><i class="glyphicon glyphicon-tags"></i> 项目标签</a>
                            </li>
                        </ul>
                    </li>
                    <li class="list-group-item tree-closed" >
                        <a href="param"><i class="glyphicon glyphicon-list-alt"></i> 参数管理</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" style="float:left;">
                        <div class="form-group has-feedback">
                            <div class="input-group">
                                <div class="input-group-addon">查询条件</div>
                                <input class="form-control has-success" type="text" id="selectRole" placeholder="请输入查询条件">
                            </div>
                        </div>
                        <button type="button" class="btn btn-warning" onclick="doSelectRole()"><i class="glyphicon glyphicon-search"></i> 查询</button>
                    </form>
                    <button type="button" class="btn btn-danger" style="float:right;margin-left:10px;" onclick="doDeleteRoleById()"><i class=" glyphicon glyphicon-remove"></i> 删除</button>
                    <button type="button" class="btn btn-primary" style="float:right;" data-toggle="modal" onclick="doShowAddDialog()"><i class="glyphicon glyphicon-plus"></i> 新增</button>
                    <!-- Button trigger modal -->
                    <!--<button type="button" class="btn btn-primary"
                            data-toggle="modal" onclick="doShowAddDialog()">模态框方式添加</button>	-->
                    <br>
                    <hr style="clear:both;">
                    <div class="table-responsive">
                        <table class="table  table-bordered">
                            <thead>
                            <tr >
                                <th width="30">序号</th>
                                <th width="30"><input id="checkAll1" type="checkbox"></th>
                                <th>名称</th>
                                <th width="100">操作</th>
                            </tr>
                            </thead>
                            <tbody id="tbodyId1">
                            <tr>
                                <td colspan="6">数据正在加载中...</td>
                            </tr>
                            </tbody>
                            <tfoot>
                            <tr >
                                <td colspan="6" align="center">

                                    <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
                                </td>
                            </tr>

                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">角色昵称</h4>
            </div>
            <div class="modal-body">
                <form id="atyFormId" class="form-horizontal" >
                    <input type="hidden" name="id" id="atyId">  <!--修改操作的时候不会直接新增一行数据-->
                    <div class="form-group">
                        <label for="nameId" class="col-sm-2 control-label">name</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="name"
                                   id="nameId" placeholder="name">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="doSaveRole()">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal ZTree -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel2">选择上级菜单</h4>
            </div>
            <div class="layui-layer layui-layer-page layui-layer-molv layer-anim" id="menuLayer" type="page" times="2" showtime="0" contype="object"
                 style="z-index:59891016; width: 300px; height: 450px; top: 100px; left: 500px; display:none">
                <div class="layui-layer-title" style="cursor: move;">选择菜单</div>
                <div class="layui-layer-content" style="height: 358px;">
                    <div style="padding: 10px;" class="layui-layer-wrap">
                        <ul id="menuTree" class="ztree"></ul>
                    </div>
                </div>
                <span class="layui-layer-setwin"> <a class="layui-layer-ico layui-layer-close layui-layer-close1 btn-cancel" ></a></span>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

<script src="jquery/jquery-2.1.1.min.js"></script>
<script src="jquery/jquery.pagination.js"></script>
<script type="text/javascript" src="bower_components/ztree/jquery.ztree.all.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="script/docs.min.js"></script>

<script type="text/javascript">
    var zTree;
    var setting = {
        data : {
            simpleData : {
                enable : true, //使用简单数据模式
                idKey : "id",  //节点数据中保存唯一标识的属性名称
                pIdKey : "parentId",  //节点数据中保存其父节点唯一标识的属性名称
                rootPId : null  //根节点id
            }
        },
        check:{
            enable:true,
            nocheckInherit:true
        }//此配置提供复选框操作(可查官方zTree)
    }


    $(function () {
        $(".list-group-item").click(function(){
            if ( $(this).find("ul") ) {
                $(this).toggleClass("tree-closed");
                if ( $(this).hasClass("tree-closed") ) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
        doSelectRole();
        $("#checkAll1").click(doChangeTBodyCheckBoxState);
        $("#tbodyId1").on("change","input:checkbox",doChangeTHeadCheckBoxState)
    });

    $("tbody .btn-success").click(function(){
        window.location.href = "assignPermission";
    })

    function doShowRoleAuth() {
        //打开模态框
        $('#myModal1').modal('show');

        //在模态框中装树
        //fillAuthTree();
        //return false;
        doLoadZtreeNodes();
    }
    function doLoadZtreeNodes(){
        var url="menu/doFindZtreeMenuNodes";
        //异步加载数据,并初始化数据
        $.getJSON(url,function(result){
            if(result.state==1){
                //使用init函数需要先引入ztree对应的js文件
                zTree=$.fn.zTree.init(
                    $("#menuTree"),
                    setting,
                    result.data);//id,name,parentId,cion
                //doRemoveNodeFromZtree();//修改时,可考虑此方案
                //显示zTree对应的div
                $("#menuLayer").css("display","block");
            }else{
                alert(result.message);
            }
        })
    }

    function doRemoveNodeFromZtree(){
        //判定是否是修改,假如是修改,从zTree中移除当前菜单以及对应子菜单
        var rowData=$("#mainContentId").data("rowData");
        if(rowData){//rowData有值,表示是修改.
            console.log("zTree",zTree);
            //1.获取当前的菜单对象
            var node=zTree.getNodeByParam("id",rowData.id,null);
            console.log("node",node);
            //2.移除当前菜单.
            zTree.removeNode(node);
        }
    }




    function doSelectRole() {
        $("#checkAll1").prop("checked",false);
        var pageNum = $(".pagination").data("pageNum");
        var uname=$("#selectRole").val();
        //console.log(uname);
        //参数封装
        let params={"pageNum":pageNum};//json格式的js对象
        if(uname)params.name=uname;
        const url="/role/page";
        $.getJSON(url, params, function (result) {
            doSetTableBodyRows(result);
            initPagination(result);
        })

    }
    function initPagination(pageInfo) {
        var totalRecord=pageInfo.data.total;
        //声明一个JSON对象存储Pagination要设置的属性
        var properties={
            num_edge_entries: 3,               //边缘页数
            num_display_entries: 5,				//主体页数
            callback:pageSelectCallback,		//用户点击1,2,3调用这个函数实现页面跳转
            items_per_page:pageInfo.data.pageSize, //每页显示的数量
            current_page: (pageInfo.data.pageNum-1), //Pagination内部使用pageIndex来管理,pageIndex从0开始,pageNum从1开始,所以减一
            prev_text: "上一页",
            next_text: "下一页"
        };
        //生成导航条
        $("#Pagination").pagination(totalRecord,properties);

    }
    //用户点击1,2,3调用这个函数实现页面跳转
    function pageSelectCallback(pageIndex,jQuery) {
        $("#checkAll1").prop("checked",false);
        var pageNum = $(".pagination").data("pageNum");
        var uname=$("#selectRole").val();
        //console.log(uname);
        //参数封装
        let params={"pageNum":pageNum};//json格式的js对象
        if(uname)params.name=uname;
        const url="/role/page";
        //跳转页面
        $.getJSON(url, params, function (result) {
            doSetTableBodyRows(result);
        })
        return false;
    }
    function doSetTableBodyRows(pageInfo) {
        //1.获取tbody对象并清空内存
        var tBody = $("#tbodyId1");
        tBody.empty();
        //2.遍历records并将结果更新到页面上.
        //for(var i in records) {      //数据量大的时候,性能较差    i的作用域不严谨
        /*for(let i=0;i<records.length;i++){
            var tr = $("<tr></tr>");
            var tds=doCreateTds(records[i]);
            tr.append(tds);
            tBody.append(tr);
        }*/
        //console.log(pageInfo);
        var record=pageInfo.data.list;
        //console.log(record);
        record.forEach(record => tBody.append(doCreateTds(record)))
        number();
    }
    function doCreateTds(data) {
        return `<tr>
							<td><span class="numberClass"></span></td>
							<td><input type="checkbox" class="cBox"  name="cItem" value="${data.id}"></td>
							<td>${data.name}</td>
							<td>
								<button type="button" class="btn btn-success btn-xs" onclick="doShowRoleAuth()">  <i class=" glyphicon glyphicon-check"></i></button>
								<button type="button" class="btn btn-primary btn-xs" onclick="doFindRoleById(${data.id})"><i class=" glyphicon glyphicon-pencil"></i></button>
								<button type="button" class="btn btn-danger btn-xs" onclick="doDeleteRoleByOneId(${data.id})"><i class=" glyphicon glyphicon-remove"></i></button>
							</td>
						</tr>`
    }
    function number(){
        for(var i=0;i< $(".numberClass").length;i++){
            $(".numberClass").get(i).innerHTML = i+1;
        }
    }
    function doDeleteRoleByOneId(id) {
        if(!confirm("确认删除吗"))return;
        const url = "/doDeleteRoleById";
        var params={"ids":id};
        $.getJSON(url, params, function (result) {
            if(result.state==1){
                alert(result.message);
                doSelectRole();
            }else{
                alert(result.message);
                //doSetQueryErrors(result.message);
            }

        })
    }function doDeleteRoleById() {
        var ids=doGetCheckedIds();
        if(ids.length==0){
            alert("至少选一个");
            return;
        }
        if(!confirm("确认删除吗"))return;
        const url = "/doDeleteRoleById";
        var params={"ids":ids.toString()};
        console.log(params);
        $.getJSON(url, params, function (result) {
            if(result.state==1){
                alert(result.message);
                doRefreshAfterDeleteOK();
                // doGetObjects();
            }else{
                alert(result.message);
                //doSetQueryErrors(result.message);
            }
        })
    }function doGetCheckedIds() {
        var idArray=[];
        $("#tbodyId1 input[type=checkbox]").each(
            function () {
                if($(this).prop("checked"))idArray.push($(this).val());
            })
        return idArray;
    }
    function doRefreshAfterDeleteOK() {
        //var pageNum=$("#pageId").data("pageNum");
        //var pageCurrent=$("#pageId").data("pageCurrent");
        //var checked=$("#checkAll1").prop("checked");
        /*if(checked){
            pageCurrent--;
            $("#pageId").data("pageCurrent",pageCurrent);
        }*/
        doSelectRole();
    }
    function doChangeTBodyCheckBoxState() {
        var flag=$(this).prop("checked");//true or false
        //2.将tbody中所有checkbox元素的值都修改为flag对应的值。
        /*$("#tbodyId input[name='cItem']").each(function () {
            $(this).prop("checked",flag);
        })*/
        $("#tbodyId1 input:checkbox").prop("checked",flag);
    }
    function doChangeTHeadCheckBoxState() {
        var flag=true;
        $("#tbodyId1 input:checkbox").each(function () {
            flag=  flag&&$(this).prop("checked")
        });
        $("#checkAll1").prop("checked",flag);
    }
    function doShowAddDialog() {
        $("#atyId").val('');
        $("#nameId").val('');
        //显示模态框
        $('#myModal').modal('show');
    }
    function doSaveRole() {
        var id=$("#atyId").val();
        var name=$("#nameId").val();
        var url="/doSaveRole";
        var params={"id":id,"name":name};
        $.getJSON(url,params,function (result) {
            alert(result.message);
        })
        $('#myModal').modal('hide');
        doSelectRole();

    }
    function doFindRoleById(id) {
        var url="/findRoleById";
        var params={"id":id};
        $.getJSON(url,params,function (result) {
            doInitEditFormData(result.data);
        })





    }
    function doInitEditFormData(result){
        //显示模态框
        $('#myModal').modal('show');
        $("#atyId").val(result.id);
        $("#nameId").val(result.name);
    }



</script>
</body>
</html>
